<template>
  <div class="flex flex-col items-center gap-4 w-full">
    <div class="flex gap-2">
      <button v-for="b in betChoices" :key="b.value"
        :class="['px-4 py-2 rounded font-bold', betChoice===b.value ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black']"
        @click="betChoice = b.value">
        {{ b.label }}
      </button>
      <button class="px-4 py-2 rounded font-bold bg-gray-300 text-black" @click="pass">PASS</button>
    </div>
    <div class="flex gap-2">
      <button v-for="amt in betAmounts" :key="amt"
        :class="['px-3 py-1 rounded', betAmount===amt ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black']"
        @click="betAmount = amt">
        {{ amt }}
      </button>
    </div>
    <div class="flex gap-2 mt-2">
      <button class="px-6 py-2 rounded bg-green-600 text-white font-bold" :disabled="!betChoice" @click="onBet">BET</button>
      <button class="px-6 py-2 rounded bg-yellow-600 text-white font-bold" :disabled="!betChoice" @click="onDeal">DEAL</button>
    </div>
    <div v-if="message" class="text-red-600 mt-2">{{ message }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from '../logic/api'

const betChoices = [
  { label: 'P', value: 'player' },
  { label: 'B', value: 'banker' },
  { label: 'T', value: 'tie' }
]
const betAmounts = [0, 1000, 1100, 1300, 1700]
const betChoice = ref('')
const betAmount = ref(1000)
const message = ref('')

function pass() {
  betChoice.value = ''
  betAmount.value = 0
  message.value = 'You chose to pass this round.'
}

async function onBet() {
  if (!betChoice.value) {
    message.value = 'Please select a bet.'
    return
  }
  await api.game.placeBet({
    bet_choice: betChoice.value,
    bet_amount: betAmount.value
  })
  message.value = 'Bet placed!'
}

async function onDeal() {
  if (!betChoice.value) {
    message.value = 'Please select a bet.'
    return
  }
  await onBet()
  await api.game.dealOnly()
  message.value = 'Dealt! Check result.'
}
</script> 